<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="用餐时间" name="1">
      <el-row>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="time.time1" label="早餐" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="time.time2" label="午餐" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="time.time3" label="晚餐" size="large" />
        </el-col>
      </el-row>
    </el-collapse-item>
    <el-collapse-item title="制作方法" name="2">
      <el-row>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="handler.handler1" label="蒸" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="handler.handler2" label="煮" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="handler.handler3" label="炸" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="handler.handler4" label="其他" size="large" />
        </el-col>
      </el-row>
    </el-collapse-item>
    <el-collapse-item title="制作时长" name="3">
      <el-row>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox
            v-model="duration.duration1"
            label="<15分钟"
            size="large"
          />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox
            v-model="duration.duration2"
            label="<30分钟"
            size="large"
          />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox
            v-model="duration.duration3"
            label="<60分钟"
            size="large"
          />
        </el-col>
      </el-row>
    </el-collapse-item>
    <el-collapse-item title="口味" name="4">
      <el-row>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="taste.taste1" label="家常味" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="taste.taste2" label="咸鲜味" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="taste.taste3" label="甜味" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="taste.taste4" label="香辣味" size="large" />
        </el-col>
        <el-col :lg="24" style="margin-left: 10px">
          <el-checkbox v-model="taste.taste5" label="其它口味" size="large" />
        </el-col>
      </el-row>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineOptions({
  name: "",
});

const activeNames = ref(["1", "2", "3", "4"]);
/**
 * 用餐时间
 * */
const time = ref({
  time1: false,
  time2: false,
  time3: false,
});
/**
 * 制作方法
 * */
const handler = ref({
  handler1: false,
  handler2: false,
  handler3: false,
  handler4: false,
});
/**
 * 制作时长
 * */
const duration = ref({
  duration1: false,
  duration2: false,
  duration3: false,
});
/**
 * 口味
 * */
const taste = ref({
  taste1: false,
  taste2: false,
  taste3: false,
  taste4: false,
  taste5: false,
});

const handleChange = () => {};
</script>

<style scoped lang="scss"></style>
